<template>
  <div>
    <div class="dashboard-editor-container">
      <panel-group @handleSetLineChartData="handleSetLineChartData"
                   :user-count="countMap.userCount"
                   :invoice-count="countMap.invoiceCount"
                   :destroyed-count="countMap.destroyedCount"
                   :submit-count="countMap.submitCount"
      />
<!--      正确错误图
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row>-->
      <!--<el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <raddar-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <pie-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <bar-chart />
          </div>
        </el-col>
      </el-row>-->
    </div>
    <div id="contain">
      <div id="d1" ref="main" class="main" hidden="hidden"></div>
      <div id="d2" ref="main" class="main" hidden="hidden"></div>
      <div id="d3" ref="main" class="main" hidden="hidden"></div>
      <div id="d4" ref="main" class="main" hidden="hidden"></div>
    </div>
    <div id="contain2">
      <div id="sup" style="width:50%;height:376px"></div>
      <div id="order" style="width:50%;height:376px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getIndexCountMap,getIndexLinechartData } from "./index";
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {getwarnlist,getSupplierInfo}from "@/api/system/info";
const lineChartData2 = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      list:[ { "materialId": "1376349123774660608", "materialNick": "5efb19cb-cadc-4110-aba5-35158f547a2c.jpg", "materialUrl": "http://127.0.0.1:9300/statics/2021/03/29/5efb19cb-cadc-4110-aba5-35158f547a2c.jpg", "materialOriginalUrl": "http://127.0.0.1:9300/statics/2021/03/29/76b63f36-b232-4834-a269-d173d6eefad4.jpg" } ],
      lineChartData: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130],
        dateData:["1","2","3","4","5","6","7"]
      },
      countMap:{},
      supdata:null,
      data: [
        {"name": "辉瑞制药","value": 200},
        {"name": 'Medtronic美敦力',"value": 300, },
        {"name": '微创医疗MicroPort',"value": 300,},
        {"name": '京都念慈菴',"value": 100, },
        {"name": '波士顿科学',"value": 100, }
      ],
    };
  },
  created() {
    //this.getSupplierInfo();
    this.getIndexCountMap();
    this.getLinechardData();
  },
  mounted() {
    this.getSupplierInfo();
    //this.getSupEchartData()
    //this.initSupCharts()
    this.getOrderEchartData()
    this.initOrderCharts()
    this.initTopChart();
  },
  methods: {
    getwarnlist(){
      getwarnlist().then(response => {
        console.log("预警信息:"+response.data);
      })
    },
    getSupplierInfo(){
      var data_;var data;
      getSupplierInfo().then(response => {
        /*data_ = response.map(function(item) {
          return [item.value, item.name];
        });*/
        this.data = response;
        this.getSupEchartData();
        this.initSupCharts();
      })
    },
    getLinechardData() {
      var that = this;
      getIndexLinechartData({}).then(response => {
        that.lineChartData = response.data
      })
    },
    initTopChart() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: 'World Population'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '2012',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    handleSetLineChartData(type) {
      // this.lineChartData = lineChartData[type]
    },
    getIndexCountMap(){
      getIndexCountMap({}).then(response=>{
        this.countMap = response.data;
        for (let key in this.countMap) {
          this.countMap[key] = parseInt(this.countMap[key])
        }
      })
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getOrderEchartData () {
      this.options = {
        title:{
          text: '年度采购订单统计',
          subtext: '2023-Months',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [12, 6, 8, 15, 17, 10, 9],
          type: 'line'
        }]
      }
    },
    initOrderCharts () {
      this.chart = this.$echarts.init(document.getElementById('order'))
      this.chart.setOption(this.options)
    },
    getSupEchartData () {
      this.options = {
        title: {
          text: '耗材供应商占比',
          subtext: 'Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            /*data: [
              { "name": '辉瑞制药',"value": 1048},
              {"name": 'Medtronic美敦力',"value": 735, },
              {"name": '微创医疗MicroPort',"value": 580,},
              {"name": '京都念慈菴',"value": 484, },
              {"name": '波士顿科学',"value": 300, }
            ],*/
            data:[],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      console.log("this.data"+this.data);
    },
    initSupCharts () {
      this.chart = this.$echarts.init(document.getElementById('sup'))
      this.options.series[0].data = this.data;
      this.chart.setOption(this.options)
      console.log("initSupCharts"+this.data);
    }
  },
};
</script>

<style rel="stylesheet/scss" scoped lang="scss">
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/welcome-background.png");
  background-size: cover;
}
#order,#sup{
  width: 400px;
  height: 400px;
}
#contain{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 50px 50px 50px 50px;
}
#contain2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 50px 50px 50px 50px;
}
.main{
  width: 200px;
  height: 100px;
}
#d1{
  background-color: #f7ecb5;
}
#d2{
  background-color: #ccb1ea;
}
#d3{
  background-color: #a6e1ec;
}
#d4{
  background-color: #ebcccc;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

